<template>
  <div class="bioForumDetail">
    <ul>
      <li>
        <span>创建者:</span>
        <p>{{ detail.userName }}</p>
      </li>
      <li>
        <span>创建时间:</span>
        <p>{{ detail.creatTime }}</p>
      </li>
      <li>
        <span>点赞数:</span>
        <p>{{ detail.caseLike }}</p>
      </li>
      <li>
        <span>浏览数:</span>
        <p>{{ detail.views }}</p>
      </li>
      <li>
        <span>标题:</span>
        <p>{{ detail.theme }}</p>
      </li>
      <li>
        <span>正文:</span>
        <p>{{ detail.content }}</p>
      </li>
      <li>
        <span>附加图片:</span>
        <p>{{ detail.content }}</p>
      </li>
    </ul>
    <span> </span>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="交流列表" name="1">
        <van-list
          v-model="incomeLoading"
          :finished="incomeFinished"
          finished-text="没有更多了"
          @load="getList(true)"
          offset="10"
          class="cellGroup"
          v-if="hasContent"
        >
          <li class="detailList" v-for="(i, index) in items" :key="index">
            <!-- <div class="title">
              <span>标题:{{ i.caseName }} </span>
              <p>创建时间:{{ i.creatTime }}</p>
            </div> -->
            <div class="middle">
              <img :src="i.headImage" alt="" />
              <div>
                <span>{{ i.userName }}</span>
                <div>
                  <p>创建时间:{{ i.creatTime }}</p>
                  <span @click="asd(index)"
                    >{{ i.commentLike
                    }}<van-icon
                      :style="{ width: '30px' }"
                      v-if="!i.like"
                      name="good-job-o"
                    />
                    <van-icon
                      v-else
                      :style="{ width: '30px' }"
                      name="good-job"
                      color="#1989fa"
                    />
                  </span>
                </div>
              </div>
            </div>
            <div class="benificial">
              <p>{{ i.comment }}</p>
            </div>
          </li>
        </van-list>
      </van-collapse-item>
    </van-collapse>

    <div class="sticky" style="background: #fff; padding: 10px">
      <button @click="showTalk = true">
        我也来说说<van-icon
          :style="{ width: '30px' }"
          name="chat-o"
          color="#fff"
        />
      </button>
    </div>

    <van-popup v-model="showTalk" position="bottom" :style="{ height: '30%' }">
      <div class="topic">
        <van-field
          v-model="talkContent"
          rows="2"
          autosize
          label="我也说说"
          type="textarea"
          maxlength="50"
          placeholder="请输入内容"
          show-word-limit
        />
        <button @click="submit">确认提交</button>
      </div>
    </van-popup>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
import { Collapse, CollapseItem, Toast } from "vant";

import { mapGetters } from "vuex";
import { getStorage } from "@/utils/auth";
import {
  getBiomicsCase,
  getBiomicsComment,
  setBiomicsComment,
  setCommentLike
} from "@/api/scientificPart";

export default {
  name: "bioForumDetail",
  components: {},
  data() {
    return {
      active: 0,
      detail: {
        name: "108",
        age: 45,
        gender: "男",
        phone: 13249235865,
        allergy: "否",
        ache: "是",
        descript: "上来看到九分裤立省价到付款了",
        hope: "快捷方式抠脚大汉科技师范",
        update: "手机拍片",
        date: "2021-01-08 17:28:00",
      },
      items: [
        // {
        //   img: require("@/assets/images/scientific/headImg.png"),
        //   name: "陈先生",
        //   time: "2020-01-10",
        //   content: "sdjfklsjdkfsjdfniuwehfiosndfjsdf",
        //   thumbsNum: 12,
        //   thumb: false,
        //   like: true,
        //   likeNum: 50,
        // },
        //     {
        //   img: require("@/assets/images/scientific/headImg.png"),
        //   name: "陈先生",
        //   time: "2020-01-10",
        //   content: "sdjfklsjdkfsjdfniuwehfiosndfjsdf",
        //   thumbsNum: 12,
        //   thumb: false,
        //   like: true,
        //   likeNum: 50,
        // },
      ],
      activeNames: ["1", "2"],
      incomeLoading: false,
      incomeFinished: true,
      hasContent: true,
      showTalk: false,
      talkContent: "",
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  mounted() {
    console.log(this.$route.params.item);
    //这里还没有传item过来
    this.detail = this.$route.params.item;
    // getCaseData({dsId:this.$route.params.item.dsId,lungClassId:this.$route.params.lungClassId}).then(res=>{

    // })
    getBiomicsComment().then((res) => {
          this.items=[];
      res.data.info.forEach(i=>{
        i.like=false;

      })
      this.items = res.data.info
    });
 
  },
  watch: {
    // items: {
    //   //监听点赞
    //   handler(val) {
    //     val.forEach((i) => {
    //       if (i.like) {
    //         Toast('点赞成功')
    //       }else{
    //          Toast('取消点赞')
    //       }
    //     });
    //   },
    //   deep: true,
    // },
  },
  methods: {
    asd(index) {
      this.items[index].like=!this.items[index].like
      if (this.items[index].like) {
      
        setCommentLike({
            caseId:this.detail.caseId,
            id:this.detail.id,
            active:1,
            classId:2
        }).then(res=>{
          if(res.status.code==200){
            Toast("点赞成功");
           this.items[index].commentLike++
          }else{
            Toast(res.data.msg)
          }  
        })
      } else {
        setCommentLike({
            caseId:this.detail.caseId,
            id:this.detail.id,
            active:-1,
            classId:2
        }).then(res=>{
          if(res.status.code==200){
             Toast("取消点赞");
              this.items[index].commentLike--
          }else{
            Toast(res.data.msg)
          }  
        })
       
      }
    },
    getList() {},
    submit() {
      //提交评论
      let obj = {
        userName: "123",
        caseId: this.detail.caseId,
      };
      setBiomicsComment(obj).then((res) => {});
    },
  },
  created() {},

  destroyed() {},
};
</script>
<style lang='scss' scoped>
.bioForumDetail {
  width: 93%;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0px 4px 12px rgba(21, 24, 45, 0.04);

  margin-top: 10px;
  background: #fff;
  & > span {
    display: block;
    text-align: left;
    padding: 20px 0;

    margin-left: 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-top: 10px;
  }
  & > ul {
    color: #999;
    li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      padding: 10px;
      span {
        display: block;
        width: 30%;
        text-align: left;
        margin-right: 5%;
      }
      p {
        width: 65%;
        text-align: left;
      }
      a {
        background: green;
        color: #fff;
        display: block;
        width: 1rem;
        padding: 10px 0;
        border-radius: 5px;
      }
    }
  }
}
/deep/.van-cell__title {
  text-align: left;
}

.detailList {
  margin-top: 10px;
  background: #fff;
}
.detailList .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 13px 10px;
}
.detailList .title p {
  width: 61%;
}
.detailList .title img {
  width: 14px;
}

.detailList .middle {
  display: flex;
  justify-content: flex-start;

  // border-bottom: 1px solid #f0f0f0;
  padding: 5px 10px;
}
.detailList .middle > img {
  width: 25px;
  height: 25px;
  margin-right: 12px;
  border-radius: 4px;
}
.detailList .middle span {
  font-size: 15px;
  display: block;
  font-weight: 500;
}
.detailList .middle p {
  font-size: 14px;
  color: #999;
}
.detailList .middle > div {
  width: 100%;
}
.detailList .middle > div > span {
  display: block;
  text-align: left;
  font-size: 16px;
  color: #333;
}
.detailList .middle > div > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.detailList .middle > div > div > span {
}
.detailList > p {
  padding: 7px 0;
  text-align: right;
}
.benificial {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.5rem;
  padding-top: 10px;
}
.benificial > span {
  font-size: 14px;
}
.benificial > p {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
  width: 100%;
}
.benificial > p span:nth-child(1) {
  font-size: 14px;
}
.benificial > p span:nth-child(2) {
  font-size: 16px;
  color: #ff6c0a;
}
.benificial font {
  font-size: 12px;
}

.sticky {
  width: 100%;
  background: #fff;
  padding: 10px 15px;
  box-shadow: 4px 0px 12px rgba(21, 24, 45, 0.09);
  position: fixed;
  bottom: 0;
  left: 0;
  button {
    border-radius: 100px;
    color: #fff;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    padding: 13px 0;
    width: 93%;
    border: 0;

    background: -webkit-linear-gradient(left, #3dc107, #07c1b8);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #3dc107, #07c1b8);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #3dc107, #07c1b8);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #3dc107, #07c1b8);
  }
}
.topic {
  p {
    text-align: left;
    padding: 20px 0;

    margin-left: 0.15rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
  }
  button {
    position: fixed;
    bottom: 10px;
    left: 4%;
    border-radius: 100px;
    color: #fff;
    display: block;

    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    padding: 13px 0;
    width: 93%;
    margin: 0 auto;
    border: 0;

    background: -webkit-linear-gradient(left, #3dc107, #07c1b8);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #3dc107, #07c1b8);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #3dc107, #07c1b8);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #3dc107, #07c1b8);
  }
}
</style>